<html>
    <head>
        <title>Flash Plus</title>
        <style>
            .sample {
                display: none;
            }
            
            body {
                overflow-x: hidden;
            }
            
            .flash-row {
                float: left;
                margin: 7px;
                border: SOLID 1px BLACK;
                background-color: WHITE;
            }
            
            .flash-row:hover {
                -webkit-box-shadow: 0px 0px 35px #FFFFFF;
            }
            
            .flash-pic {
                border: dotted 1px black;
                overflow: hidden;
                width: 160px;
                height: 160px;
                margin: 3px;
                cursor: pointer;
                background-repeat: no-repeat;
                background-position: center center;
                background-color: #FAC4C4;
            }
            
            .screenshot {
                position: relative;
                border: SOLID 1px BLACK;
            }
            
            .flash-actions > img {
                padding: 2px;
                margin: 0px;
                cursor: pointer;
                width: 25px;
                -webkit-transition: all 0.1s ease-in-out margin: 5%;
            }
            
            .flash-actions > img:hover {
                -webkit-transform: scale(1.5);
            }
            
            body {
                width: 100px;
                text-align: center;
                margin: 0px;
                padding: 10px;
                font-size: 12px;
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
            }
            
            body > .templates > div {
                display: none;
            }
            
            .command > img {
                cursor: pointer;
                -webkit-transform: scale(2);
                margin: 2em;
            }
            
            .command > div {
                color: BLACK;
                font-size: 1.2em;
            }
            
            #console {
                display: none;
                width: 90%;
                float: left;
                clear: both;
            }
        </style>
    </head>
    <body onload="javascript:main()" style ="background-image: -webkit-gradient(linear , 0% 0%, 0% 100%, to(#ED3939), from(#FAC6C6));">
        <div class = "loader" style ="height : 160px; background-image : url('/images/ajax-loader.gif'); background-position : center; background-repeat : no-repeat;">
        </div>
        <div class = "templates">
            <div class = "command">
                <img>
                </img>
                <div>
                </div>
            </div>
            <div class = "flash-components">
                <div class = "sample flash-row">
                    <div class = "flash-pic">
                        <img class = "screenshot"/>
                    </div>
                    <div class = "flash-actions">
                    </div>
                </div>
            </div>
        </div>
        <div style ="clear:both">
        </div>
        <div id = "console">
            <hr/>
        </div>
    </body>
    <script type = "text/javascript" src = "/jquery/js/jquery-1.4.1.min.js">
    </script>
    <script type = "text/javascript">
        var numberOfFlash = 0;
        
        function onClickCommand(e){
            log(e.data.command, "on", e.data.element, e.data.args);
            chrome.tabs.sendRequest(e.data.tab.id, {
                "action": "executeCommand",
                "command": e.data.command,
                "element": e.data.element,
                "args": e.data.args
            }, function(response){
                window.close();
            });
        };
        
        var PopupPage = {
            "showFlashContent": function(response, tab){
                var flashContent = response.data;
                numberOfFlash += flashContent.length;
                if (numberOfFlash === 0 || $(".command").css("display") != "none") {
                    return;
                }
                $(document.body).css("width", 190 * (numberOfFlash <= 3 ? numberOfFlash : 3));
                $(".flash-components").show();
                var sample = $(".flash-components  .sample:first");
                $.each(flashContent, function(i){
                    var flashRow = sample.clone(true).insertAfter(sample).removeClass("sample").addClass("flash-row");
                    var screenshot = flashRow.find(".screenshot").css("display", "block");
                    var scale = 160 / ((this.dimensions.width < this.dimensions.height) ? this.dimensions.width : this.dimensions.height);
                    var id = this.id;
                    var element = this.element;
                    log(this.element, this.frameUrl);
                    
                    screenshot.css({
                        "width": (response.pageDimensions.width * scale),
                        "height": (response.pageDimensions.height * scale),
                        "top": (response.pageDimensions.top - this.dimensions.top) * scale,
                        "left": (response.pageDimensions.left - this.dimensions.left) * scale,
                        "display": this.frameUrl ? "none" : "block"
                    }).parent().bind("click", {
                        "element": element,
                        "command": "addScreenShotActions",
                        "tab": tab,
                        "args": {
                            "frameUrl": this.frameUrl
                        }
                    }, onClickCommand);
                    if (this.frameUrl) {
                        screenshot.parent().html("<br/><br/>Thumbnail cannot be displayed as media is inside a frame");
                    }
                    var me = this;
                    var flashActions = flashRow.find("div.flash-actions");
                    $.each(response.commands, function(i){
                        var icon = $("<img/>", {
                            "src": chrome.extension.getURL(this.icon),
                            "title": this.tooltip
                        }).appendTo(flashActions);
                        $(icon).bind("click", {
                            "element": element,
                            "command": this.command,
                            "tab": tab,
                            "args": {
                                "frameUrl": me.frameUrl
                            }
                        }, onClickCommand);
                    });
                });
            },
            showFlashAction: function(response, tab){
				log("Showing ", response.data.command);
				$(".flash-components").hide();
                $(".command").show().find("div").html(response.tooltip);
                $(".command").find("img").attr("src", chrome.extension.getURL(response.icon)).bind("click", {
                    "element": response.data.element,
                    "command": response.data.command,
                    "tab": tab,
                }, onClickCommand);
            }
        }
        
        window.onload = function(){
            loadScreenShot();
            $(".flash-components  .sample:first").siblings("div").remove();
            chrome.tabs.getSelected(null, function(tab){
                chrome.tabs.sendRequest(tab.id, {
                    "action": "getPopupAction"
                }, function(response){
                    $(".loader").hide();
                    PopupPage[response.action].call(this, response, tab);
                    chrome.pageAction.setTitle(response.tooltip);
                });
            });
        };
        
        window.setInterval(loadScreenShot, 3000);
        
        function loadScreenShot(){
            chrome.tabs.captureVisibleTab(null, function(dataURI){
                $(".screenshot").attr("src", dataURI);
            });
        }
        
        function log(){
            $("#console").append(JSON.stringify(arguments) + "<br/>");
        }
        
        if (localStorage["enableLogging"] === "true") {
            $("#console").show();
        }
    </script>
</html>
